/**
 * @description 历史内容区域
 */
import { useQuasar } from '@teld/q-components';
import TmIcon from 't/basic/icon';
import { defineComponent, ref, toRefs, watch } from 'vue';
import TmPopover from '../popover';
import subWarning from './subWarning';
import TList from 't/basic/list';
import TItem from 't/basic/item';
import TItemSection from 't/basic/item-section';
export default defineComponent({
  name: 'QueryPlan',
  components: { TmIcon, subWarning, TmPopover, TList, TItem, TItemSection },
  props: {
    plan: Object,
    currectPlan: String,
    modifyPlan: Object,
    pageID: String,
    showSubWarning: {
      default: '1',
      type: String,
    },
    planList: Array,
    planSort: String,
    planIsChange: Boolean,
    PortalIsChange:Boolean,
    planType:String
  },
  emits: ['operate', 'planChange', 'update:planIsChange'],
  setup(props, { emit }) {
    const {
      plan,
      modifyPlan,
      pageID,
      showSubWarning,
      planList,
      planSort,
      planIsChange,
      PortalIsChange
    } = toRefs(props);
    const showPopover = ref(false);

    const $q = useQuasar();
    const actions = ref([
      {
        text: $q.lang.queryPlan.dialog.reName,
        code: 'rename',
        icon: (() => {
          return (
            <tm-icon
              name='drive_file_rename_outline'
              style='
                          display: inline-block;
                          margin-right: 8px;
                          font-size: 14px;
                        '
            />
          );
        })(),
      },
      {
        text: $q.lang.queryPlan.dialog.share,
        code: 'share',
        icon: (() => {
          return (
            <tm-icon name='share' style='font-size: 14px; margin-right: 8px' />
          );
        })(),
      },
      {
        text: $q.lang.queryPlan.title.saveAs,
        code: 'saveAs',
        icon: (() => {
          return (
            <i
              class='dx-icon fas icon-t-save-as'
              style='font-size: 14px; margin-right: 8px'
            ></i>
          );
        })(),
      },
      {
        text: $q.lang.queryPlan.title.setDefault,
        code: 'default',
        icon: (() => {
          let color = plan.value.isfromShare?'rgba(0,0,0,0.32)':' rgba(0, 0, 0, var(--t-color-opacity, /*批量处理90%透明度*/0.9))'
          return (
            <svg
              class='icon'
              width='14px'
              height='14px'
              viewBox='0 0 1024 1024'
              version='1.1'
              xmlns='http://www.w3.org/2000/svg'
              style='margin-right: 8px'
            >
              <path
                fill={color}
                d='M512 1024c-282.368 0-512-229.632-512-512s229.632-512 512-512 512 229.632 512 512-229.632 512-512 512zM512 70.592A441.92 441.92 0 0 0 70.592 512 441.92 441.92 0 0 0 512 953.408 441.92 441.92 0 0 0 953.408 512 441.92 441.92 0 0 0 512 70.592zM317.76 512a194.24 194.24 0 1 0 388.48 0 194.24 194.24 0 0 0-388.48 0z'
              />
            </svg>
          );
        })(),
      },
      {
        text: $q.lang.queryPlan.title.moveUp,
        code: 'moveUp',
        icon: (() => {
          return (
            <i
              class={`${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowUp??'icon-t-arrow-up'}`}
              style='
                          font-size: 14px;
                          margin-right: 8px;
    display: inline-block;
                        '
            ></i>
          );
        })(),
      },
      {
        text: $q.lang.queryPlan.title.moveDown,
        code: 'moveDown',
        icon: (() => {
          return (
            <i
              class={`${TComponents?.IconList?.common??'fas dx-icon'} ${TComponents?.IconList?.arrowDown??'icon-t-arrow-down'}`}
              style='
                          font-size: 14px;
                          margin-right: 8px;
    display: inline-block;
                        '
            ></i>
          );
        })(),
      },
      {
        text: $q.lang.queryPlan.title.top,
        code: 'top',
        icon: (() => {
          return (
            <i
              class='dx-icon fas icon-t-align-top-outlined'
              style='margin-right: 8px; font-size: 14px'
            ></i>
          );
        })(),
      },
      {
        text: $q.lang.queryPlan.title.del,
        code: 'del',
        icon: (() => {
          return (
            <i
              style='margin-right: 8px; font-size: 14p x'
              class='fas dx-icon icon-t-delete-fill'
            ></i>
          );
        })(),
      },
    ]);

    // if(props.planType=='1'){
    //   actions.value = actions.value.filter(item=>!(item.code=='share'||item.code=='sub'))
    // }
    // item.code=='share'||
    if(props.planType=='1'){
      actions.value = actions.value.filter(item=>!(item.code=='sub'||item.code=='default'))
    }
    watch(
      () => plan.value?.PlanRange,
      () => {
        if ((plan.value?.PlanRange==2||plan.value?.PlanRange==3)&&!plan.value?.isfromShare) {
          if (!actions.value.some(item => item.code == 'shareDetail')) {
            actions.value.push({
              text: $q.lang.queryPlan.dialog.shareDetail,
              code: 'shareDetail',
              icon: (() => {
                return (
                  <i
                    style='margin-right: 8px; font-size: 14px'
                    class='fas dx-icon icon-t-share-fill'
                  ></i>
                  // <tm-icon style='margin-right: 8px; font-size: 14px' name='share' />
                );
              })(),
            });
          }
        } else {
          actions.value = actions.value.filter(
            item => item.code != 'shareDetail',
          );
        }
      },
      {
        immediate: true,
        deep: true,
      },
    );

    // const showSubWarning = ref(false);

    const onSelect = e => {
      switch (e.code) {
        case 'edit':
          emit('operate', { type: 'edit', plan: plan.value });
          showPopover.value = false;
          break;
        case 'rename':
          emit('operate', { type: 'rename', plan: plan.value });
          showPopover.value = false;
          break;
        case 'saveAs':
          emit('operate', { type: 'saveAs', plan: plan.value });
          showPopover.value = false;
          break;
        case 'share':
          emit('operate', { type: 'share', plan: plan.value });
          showPopover.value = false;
          break;
        case 'default':
          emit('operate', { type: 'default', plan: plan.value });
          break;
        case 'top':
          emit('operate', { type: 'top', plan: plan.value });
          break;
        case 'sub':
          // showSubWarning.value = true;
          emit('operate', {
            type: 'sub',
            plan: JSON.parse(JSON.stringify(plan.value)),
          });
          showPopover.value = false;
          break;
        case 'del':
          emit('operate', { type: 'delete', plan: plan.value });
          showPopover.value = false;

          // showConfirmDialog({
          //   title: '警告',
          //   message: '确定删除该方案吗？',
          //   ok: true,
          //   cancel: true,
          // }).onOk(async () => {
          //   emit('operate', { type: 'delete', plan: plan.value });
          // });

          break;
        case 'moveUp':
          if (e.disabled) return;
          emit('operate', { type: 'moveUp', plan: plan.value });
          break;
        case 'moveDown':
          if (e.disabled) return;
          emit('operate', { type: 'moveDown', plan: plan.value });

          break;
        case 'shareDetail':
          showPopover.value = false;
          emit('operate', { type: 'shareDetail', plan: plan.value });
          break;
      }
    };
    const renderPlanType = type => {
      const res = {
        name: '',
        color: '',
      };
      if (type == 0) {
        res.name = $q.lang.queryPlan.dialog.public;
        res.color = '#00A7CB';
        return res;
      } else if (type == 1) {
        res.name = $q.lang.queryPlan.dialog.previte;
        res.color = '#FF9540';
        return res;
      } else if (type == 2) {
        res.name = $q.lang.queryPlan.dialog.planToShare;
        res.color = '#FF5A66';
        return res;
      } else if (type == 3) {
        res.name = $q.lang.queryPlan.dialog.planByShare;
        res.color = '#0078D4';
        return res;
      }
    };

    watch(
      () => plan.value,
      () => {
        if (showSubWarning.value !== '0'&&props.planType!='1') {
          actions.value =  actions.value.filter(item=>item.code!='sub')
          if (plan.value?.WarningID && plan.value.IsAuth) {
            actions.value.unshift({
              text: $q.lang.queryPlan.subWarning.cancelSubWarning,
              code: 'sub',
              icon: (() => {
                return (
                  <i
                    style='margin-right: 8px; font-size: 14p x'
                    class='fas dx-icon icon-t-unsubscribe-line'
                  ></i>
                );
              })(),
            });
          } else if (plan.value?.WarningID && !plan.value.IsAuth) {
            actions.value.unshift({
              text: $q.lang.queryPlan.subWarning.viewSubWarning,
              code: 'sub',
              icon: (() => {
                return (
                  <i
                    style='margin-right: 8px; font-size: 14px'
                    class='fas dx-icon icon-t-subscribe-line'
                  ></i>
                );
              })(),
            });
          } else if (plan.value.IsAuth && plan.value.PlanRange != 3) {
            actions.value.unshift({
              text: $q.lang.queryPlan.subWarning.subWarning,
              code: 'sub',
              icon: (() => {
                return (
                  <i
                    style='margin-right: 8px; font-size: 14px'
                    class='fas dx-icon icon-t-subscribe-line'
                  ></i>
                );
              })(),
            });
          }
        }
        actions.value.forEach(item => {
          const i = plan.value;
          switch (item.code) {
            case 'edit':
              item.disabled =i.isfromShare|| !(
                (i.PlanRange || (!i.PlanRange && i.IsAuth)) &&
                i.PlanRange != 3
              );
              break;
            case 'del':
              item.disabled = i.isfromShare||!(
                (i.PlanRange || (!i.PlanRange && i.IsAuth)) &&
                i.PlanRange != 3 &&
                !i.IsSystem
              );
              break;
            case 'sub':
              item.disabled = false;

              if (i.WarningID && i.IsAuth) {
                item.text = $q.lang.queryPlan.subWarning.cancelSubWarning;
                item.icon = (() => {
                  return (
                    <i
                      style='margin-right: 8px; font-size: 14px'
                      class='fas dx-icon icon-t-unsubscribe-line'
                    ></i>
                  );
                })();
              } else if (i.WarningID && !i.IsAuth) {
                item.text = $q.lang.queryPlan.subWarning.viewSubWarning;
                item.icon = (() => {
                  return (
                    <i
                      style='margin-right: 8px; font-size: 14px'
                      class='fas dx-icon icon-t-subscribe-line'
                    ></i>
                  );
                })();
              } else if (!i.WarningID && i.IsAuth && i.planRange != 3) {
                item.text = $q.lang.queryPlan.subWarning.subWarning;
                item.icon = (() => {
                  return (
                    <i
                      style='margin-right: 8px; font-size: 14px'
                      class='fas dx-icon icon-t-subscribe-line'
                    ></i>
                  );
                })();
              } else {
                item.disabled = true;
                item.text = $q.lang.queryPlan.subWarning.subWarning;
                item.icon = (() => {
                  return (
                    <i
                      style='margin-right: 8px; font-size: 14px'
                      class='fas dx-icon icon-t-subscribe-line'
                    ></i>
                  );
                })();
              }
              break;
            case 'top':
              item.disabled = i.isfromShare
              item.text =
                i.TopTime != '0001-01-01 00:00:00'
                  ? $q.lang.queryPlan.dialog.cancelTop
                  : $q.lang.queryPlan.dialog.topPlan;
              break;
            case 'default':
              item.disabled = i.isfromShare
              item.text = i.IsDefault
                ? $q.lang.queryPlan.title.cancelDefault
                : $q.lang.queryPlan.title.setDefault;
              break;
            case 'share':
              item.disabled =  i.isfromShare||!(i.PlanRange == 1 || i.PlanRange == 2);
              break;
            case 'saveAs':
              break;
            case 'rename':
              item.disabled =  i.isfromShare||!(
                (i.PlanRange || (!i.PlanRange && i.IsAuth)) &&
                i.PlanRange != 3
              );
              break;
            case 'moveUp':
              item.disabled =  i.isfromShare
              if (planList.value) {
                let firstPlan = planList.value.filter(items => {
                  if (i.PlanRange == '0') {
                    return (
                      items.PlanRange == '0' &&
                      i.TopTime == '0001-01-01 00:00:00'
                    );
                  } else {
                    return (
                      items.PlanRange != '0' &&
                      i.TopTime == '0001-01-01 00:00:00'
                    );
                  }
                })[0];
                if (
                  (firstPlan && firstPlan.ID == i.ID) ||
                  planSort.value != 'PlanOrder' ||
                  i.TopTime != '0001-01-01 00:00:00'
                ) {
                  item.disabled = true;
                } else {
                  item.disabled = false;
                }
              }
              break;
            case 'moveDown':
              item.disabled =  i.isfromShare
              if (planList.value) {
                let lastPlan = planList.value.filter(items => {
                  if (i.PlanRange == '0') {
                    return (
                      items.PlanRange == '0' &&
                      i.TopTime == '0001-01-01 00:00:00'
                    );
                  } else {
                    return (
                      items.PlanRange != '0' &&
                      i.TopTime == '0001-01-01 00:00:00'
                    );
                  }
                });
                lastPlan = lastPlan[lastPlan.length - 1];
                if (
                  (lastPlan && lastPlan.ID == i.ID) ||
                  planSort.value != 'PlanOrder' ||
                  i.TopTime != '0001-01-01 00:00:00'
                ) {
                  item.disabled = true;
                } else {
                  item.disabled = false;
                }
              }
              break;
          }
        });
      },
      {
        immediate: true,
        deep: true,
      },
    );
    watch(
      () => planSort.value,
      () => {
        actions.value.forEach(item => {
          const i = plan.value;
          switch (item.code) {
            case 'moveUp':
              if (planList.value) {
                let firstPlan = planList.value.filter(items => {
                  if (i.PlanRange == '0') {
                    return (
                      items.PlanRange == '0' &&
                      i.TopTime == '0001-01-01 00:00:00'
                    );
                  } else {
                    return (
                      items.PlanRange != '0' &&
                      i.TopTime == '0001-01-01 00:00:00'
                    );
                  }
                })[0];
                if (
                  (firstPlan && firstPlan.ID == i.ID) ||
                  planSort.value != 'PlanOrder' ||
                  i.TopTime != '0001-01-01 00:00:00'
                ) {
                  item.disabled = true;
                } else {
                  item.disabled = false;
                }
              }
              break;
            case 'moveDown':
              if (planList.value) {
                let lastPlan = planList.value.filter(items => {
                  if (i.PlanRange == '0') {
                    return (
                      items.PlanRange == '0' &&
                      i.TopTime == '0001-01-01 00:00:00'
                    );
                  } else {
                    return (
                      items.PlanRange != '0' &&
                      i.TopTime == '0001-01-01 00:00:00'
                    );
                  }
                });
                lastPlan = lastPlan[lastPlan.length - 1];
                if (
                  (lastPlan && lastPlan.ID == i.ID) ||
                  planSort.value != 'PlanOrder' ||
                  i.TopTime != '0001-01-01 00:00:00'
                ) {
                  item.disabled = true;
                } else {
                  item.disabled = false;
                }
              }
              break;
          }
        });
      },
      {
        immediate: true,
        deep: true,
      },
    );
    const render = () => {
      return (
        <div
          class='plan'
          onClick={() => {
            if (plan.value.ID == modifyPlan.value?.ID) return;
            emit('planChange', plan.value);
          }}
          style={'gap:8px; width:100%'}
        >
          <p>
            <span
              class='planType'
              style={
                'color:' +
                (renderPlanType(plan.value?.PlanRange)?.color ?? '') +
                ';border-color:' +
                (renderPlanType(plan.value?.PlanRange)?.color ?? '')
              }
            >
              {renderPlanType(plan.value?.PlanRange)?.name}
            </span>
          </p>
          <p
            style={
              'line-height: 1.5; display: flex;align-items: center;flex:1 1 auto;display: inline-block;overflow: hidden;white-space: nowrap; text-overflow: ellipsis;'
            }
          >
            {plan.value?.Name}
          </p>
          <p style='flex:none'>
            {(() => {
              if (modifyPlan.value && modifyPlan.value.ID == plan.value.ID) {
                return (
                  <span class='planStatus'>
                    <tm-icon name='done' />
                  </span>
                );
              }
            })()}

            {(() => {
              if (plan.value && plan.value.IsDefault&&props.planType !='1') {
                return (
                  <span class='defaultPlan'>
                    {$q.lang.queryPlan.title.default}
                  </span>
                );
              }
              return;
            })()}
            {/* 订阅 */}
            {(() => {
              if (plan.value && plan.value.WarningID) {
                return <i class='fas icon icon-fassubscribe'></i>;
              }
            })()}

            {(() => {
              if (plan.value?.TopTime != '0001-01-01 00:00:00') {
                return (
                  <svg
                    style='width: 10px; margin-top: 0px;'
                    id='图层_1'
                    fill="i.ID == currentQueryPlan.ID ? ' var(--color)' : ''"
                    data-name='图层 1'
                    xmlns='http://www.w3.org/2000/svg'
                    viewBox='0 0 22.23 32'
                  >
                    <path
                      d='M16,0,4.88,14.55h6.61v8.06h9V14.55h6.61ZM6.46,25.25h2.1v6.66h1.52V25.25h2.09V23.91H6.46Zm9.63-1.52q-3.27.09-3.38,4.2c0,2.66,1.18,4,3.38,4.07s3.28-1.41,3.35-4.07S18.25,23.79,16.09,23.73Zm0,7.1c-1.19,0-1.78-1-1.78-2.9S14.9,25,16.09,25s1.76,1,1.76,2.94S17.26,30.83,16.09,30.83Zm6.59-6.92H20.51v8H22V28.84h1.1a2.3,2.3,0,0,0,2.44-2.47C25.56,24.7,24.61,23.88,22.68,23.91Zm-.23,3.59H22V25.25h.45c1-.12,1.51.26,1.49,1.12S23.47,27.61,22.45,27.5Z'
                      transform='translate(-4.88)'
                    />
                  </svg>
                );
              }
            })()}
            {(() => {
              if (
                (PortalIsChange.value||planIsChange.value) &&
                modifyPlan.value &&
                modifyPlan.value.ID == plan.value.ID
              ) {
                return (
                  <span
                    onClick={() => {
                      if (plan.value.IsAuth) {
                        emit('operate', { type: 'save', plan: plan.value });
                      } else {
                        emit('operate', { type: 'saveAs', plan: plan.value });
                      }
                      setTimeout(() => {
                        emit('update:planIsChange', false);
                      }, 500);
                    }}
                    style={'min-width: 28px;'}
                  >
                    {plan.value.IsAuth
                      ? $q.lang.queryPlan.title.save
                      : $q.lang.queryPlan.title.saveAs}
                  </span>
                );
              }
            })()}
            <span class='defaultPlan'>
              <tm-popover
                anchor='top right'
                v-model:show={showPopover.value}
                actions={actions.value}
                onSelect={onSelect}
                styleClass='defaultPlanPopover plan_popover_operate '
                onShow={() => {
                  showPopover.value = true;
                }}
                onHide={() => {
                  showPopover.value = false;
                }}
                style='margin-left: 18px !important;'
                teleport={(() => {
                  return document.body;
                })()}
              >
                {{
                  default: () => {
                    return (
                      <t-list
                        style={`min-width: 116px;padding:8px 0;position:relative;z-index:1111`}
                      >
                        {(() => {
                          let Template = [];
                          actions.value.forEach(item => {
                            // if (!) {
                            Template.push(
                              <t-item
                                clickable
                                style='overflow: hidden;margin-bottom:1px'
                                class='plan_list_item'
                              >
                                <t-item-section>
                                  <div
                                    style={
                                      'display:flex;align-items:center;justify-content:start;' +
                                      (item.disabled
                                        ? 'color:rgba(0,0,0,0.32)'
                                        : '')
                                    }
                                    onClick={() => {
                                      if (item.disabled) return;
                                      showPopover.value = false;
                                      onSelect(item);
                                    }}
                                  >
                                    <span
                                      style={
                                        'display: flex;align-items: center;'
                                      }
                                    >
                                      {item.icon}
                                    </span>
                                    <span>{item.text}</span>
                                  </div>
                                </t-item-section>
                              </t-item>,
                            );
                            // }
                          });
                          return Template;
                        })()}
                      </t-list>
                    );
                  },
                  reference: () => {
                    return (
                      <tm-icon
                        name='more_horiz'
                        class={
                          showPopover.value
                            ? 'plan_list_more_operate plan_list_more_operate_opacity'
                            : 'plan_list_more_operate'
                        }
                        onClick={e => {
                          e.stopPropagation();
                          e.preventDefault();
                          showPopover.value = !showPopover.value;
                        }}
                      />
                    );
                  },
                }}
              </tm-popover>
            </span>
          </p>
        </div>
      );
    };
    return render;
  },
});
